<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: #409EFF;
        }

    </style>
</head>
<body>
<div id="app">
    <el-header style="text-align: right; font-size: 12px">
        <h1 style="text-align: left;position: absolute;top: -8px;">ERP企业管理系统</h1>
        <div style="width: 100px;position: absolute;right: 100px;">
            <el-dropdown trigger="hover">
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span th:text="${session.user.userName}"></span>
        </div>
        <el-image
                style="width: 40px; height: 40px;border-radius: 50%;top: 10px;"
                th:src="'http://121.5.226.17/images/'+${session.user.userImage}">
            <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
            </div>
        </el-image>
    </el-header>

    <el-container style="height: 640px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu
                    :default-openeds="['7']"
                    active-text-color="#409EFF"
                    text-color="#000000">
                <el-submenu v-for="father in menusFather" :index="father.id">
                    <template slot="title">{{father.menuName}}</template>
                    <el-menu-item
                            v-for="son in father.menusSon"
                            :index="father.id + '-' + son.id">
                        <a href="javascript:void(0);"
                           :href="son.menuUrl"
                           target="main">{{son.menuName}}</a>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-main>
                <iframe name="main" frameborder="0" style="margin: 0px;width: 100%;height: 594px;"></iframe>
            </el-main>
        </el-container>
    </el-container>
    <el-footer style="height: 0;">
        <span style="display: block;margin: 0px auto;width: 250px;text-align: center;">
            &copy;2021-xxxx hhx.com 版权所有
        </span>
    </el-footer>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                menusFather:[]
            }
        },
        methods:{
            // selectMenu(index,indexPath){
            //     console.log(index);
            //     console.log(indexPath);
            // }
            exit(){
                window.location = "/login.html";
            }
        },
        mounted(){
            axios.get("/menus").then(value => {
                this.menusFather = value.data;
            })
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>